<template>
    <base-breadcrumb>
      <a-card>
        <a-button class="mb12" type="primary" v-btnPermission="'tm_041_add_01'" @click="openModal('add')" >新增</a-button>
        <a-table
          :pagination="pagination"
          :rowClassName="rowClassName"
          :loading="loading"
          :customRow="customRow"
          rowKey="id"
          :columns="columns"
          :data-source="list"
          :expandedRowKeys="expandedRowKeys"
          :expandIcon="expandIcon"
        >
          <div slot="enable" slot-scope="text,record">
            {{setEnableName(record)}}
          </div>
          <template slot="actions" slot-scope="text, record" class="pub-table-list-action">
            <div v-if="!record.children">
              <a v-btnPermission="'tm_041_edi_02'" @click="openModal('edit', record)">编辑</a>
              <a-divider v-btnPermission="'tm_041_del_03'" type="vertical"></a-divider>
              <a v-btnPermission="'tm_041_del_03'" @click="deleteDFn(record)">删除</a>
            </div>
          </template>
        </a-table>
      </a-card>
      <div class="modal">
        <children-modal ref="childrenModal" :visible.sync="childrenVisible" :form="form" :type="type" @ok="getData()" @closeModal="closeModal"></children-modal>
      </div>
    </base-breadcrumb>
  </template>
  
  <script>
  import { majorTypeList,deleteByPrimaryKey} from '@/api/technical/majorConfig'
  import childrenModal from './childrenModal'
  import cloneDeep from 'lodash.clonedeep' // 深拷贝
  export default {
    name: 'a' + Date.now(),
    components: {
      childrenModal
    },
    data() {
      return {
        //页码数据
        pagination: {
          defaultCurrent: 1, // 默认当前页数
          defaultPageSize: 10, // 默认当前页显示数据的大小
          total: 0, // 总数，必须先有
          showSizeChanger: true,
          showQuickJumper: true,
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          showTotal: (total) => `共 ${total} 条`, // 显示总数
          onShowSizeChange: (current, pageSize) => {
            this.pagination.defaultCurrent = 1
            this.pagination.defaultPageSize = pageSize
            this.getData()
          },
          // 改变每页数量时更新显示
          onChange: (current, size) => {
            this.pagination.defaultCurrent = current
            this.pagination.defaultPageSize = size
            this.getData()
          }
        },
        // 子组件模态框是否展开
        childrenVisible: false,
        //模态框表单数据
        form: {},
        //表格数据
        list: [],
        //组件类型
        type: '',
        loading: false,
        columns: [
          {
            title: '序号',
            dataIndex: 'index',
            isHidden: true,
            width: 140,
            customRender() {
              return Number(arguments[2]) + 1
            }
          },
          {
            title: '工程类别',
            dataIndex: 'programmeName',
            scopedSlots: { customRender: 'programmeName' },
            width: 300,
          },
          {
            title: '专业类别',
            dataIndex: 'majorName',
            scopedSlots: { customRender: 'majorName' },
            
          },
          {
            title: '状态',
            dataIndex: 'enable',
            width: 160,
            scopedSlots: { customRender: 'enable' }
          },
          {
            title: '操作',
            dataIndex: 'actions',
            width: 200,
            scopedSlots: { customRender: 'actions' }
          }
        ],
        selectRow: {
          id: null
        },
        rowClassName: (r) => {
          return r.id === this.selectRow.id ? 'select' : ''
        },
        expandedRowKeys: [],
        customRow: (record) => {
          return {
            on: {
              // 事件
              click: (event) => {
                this.onExpand(record)
              }
            }
          }
        },
        params: {}
      }
    },
    created() {
      this.getData()
    },
    methods: {
      setEnableName(data){
        let name = '';
        if(data.parentId){
          name = data.enable== '1'?'可用':'不可用';

        }else{
          name = ''
        }
        return name;
      },
      /**
       * @description:              打开模态框
       * @param {value, record}     参数
       * @return {Promise}          接口Promise
       */
      openModal(value, record, ident) {
        this.type = value
        this.form = {}
        this.form = cloneDeep(record) || {};
        if(record){
          console.log(record,1223)
          this.form.enable = record.enable*1;
          console.log(  this.form.enable,12233)
          this.form.name = record.majorName;
        }
        this.childrenVisible = true
      },
      /**
       * @description:         请求列表接口
       * @param {props} props  参数
       * @return {Promise}     接口Promise
       */
      async getData() {
        this.loading = true
        let pageQuery = { pageNum: this.pagination.defaultCurrent, pageSize: this.pagination.defaultPageSize}
        let res = await majorTypeList(pageQuery)
        this.loading = false
        if (res.code == '0') {
          this.list = res?.data.list || []
          this.pagination.total = res.data.total;
        }
      },
      /**
       * @description:         是否展开
       * @param {props} props  参数
       * @return {Promise}     接口Promise
       */
      expandIcon(props) {
        if (props.record.children && props.record.children.length) {
          if (props.expanded) {
            //有数据-展开时候图标
            return <div role="button" tabIndex="0" aria-label="关闭行" class="ant-table-row-expand-icon ant-table-row-expanded"></div>
          } else {
            //有数据-未展开时候图标
            return <div role="button" tabIndex="0" aria-label="展开行" class="ant-table-row-expand-icon ant-table-row-collapsed"></div>
          }
        } else {
          //无数据-图标
          return <span class="ant-table-row-expand-icon ant-table-row-spaced"></span>
        }
      },
      /**
       * @description:              关闭模态框
       * @param {assemblyVisible}   参数
       * @return {Promise}          接口Promise
       */
      closeModal() {
        this.childrenVisible = false
        //this.getData()
      },
      onExpand(record) {
        // console.log('recordrecord', record)
        if (!this.editing) {
          if (this.selectRow.id === record.id) {
            this.selectRow = { id: null }
          } else {
            this.selectRow = record
          }
          this.toggle(record.id)
          // console.log('选中', record)
        }
      },
      toggle(id) {
        let res = this.expandedRowKeys.findIndex((v) => v === id)
        if (res === -1) {
          this.expandedRowKeys.push(id)
        } else {
          this.expandedRowKeys.splice(res, 1)
        }
      },
      //删除
      deleteDFn(str){
      let that = this
      that.$confirm({
        title: '温馨提示',
        content: `确认删除？`,
        okText: '确认',
        cancelText: '关闭',
        onOk() {
          return deleteByPrimaryKey({ id: str.id })
            .then((res) => {
              if (res.code == '0') {
                that.$message.success('删除成功！')
                that.getData()
              }
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
      },
    }
  }
  </script>
  <style lang="less">
  .select {
    background: rgb(230, 247, 255);
  
    &:hover {
      background: rgb(230, 247, 255);
    }
  }
  </style>
  